<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>快乐江米-俄罗斯方块1.0.4</title>
    <style>
        body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        }

        .container {
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        min-height: 100%; /* 确保容器高度至少与视口相同，以使内容保持中心位置 */
        }
        .left-content {
        margin: auto;
        padding: 20px;
        background-color: #000000; /* 可自定义背景色 */
        border-radius: 5px;
        }
        .right-content {
        margin: auto;
        padding: 20px;
        background-color: #ffffff; /* 可自定义背景色 */
        border-radius: 5px;
        }

        /* 根据需要调整左边和右边的内容区宽度 */
        .left-content { width: 40%; }
        .right-content { width: 60%; }

        /* 确保内容不会溢出 */
        @media screen and (max-width: 768px) {
        .left-content, .right-content {
            width: calc(100% - 20px); /* 避免在小屏幕下重叠 */
        }
        }
        .basicinfo {
            margin: 15px 0;
        }
    
        .basicinfo .row > .col-xs-4 {
            padding-right: 0;
        }
    
        .basicinfo .row > div {
            margin: 5px 0;
        }
    
    
        .grid{
            align-self: center;
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-gap: 2px;
            width: max-content;
            height: calc(30 * 30 + (30 - 1) * 2); /* 计算总高度 */
        }
    
        .block{
            background-color: rgba(147, 147, 147, 0.107); /*方块颜色*/
            /*边框颜色*/
            border: 1px solid #ffffff44;
            border-radius: 5px; /* 添加圆角 */
            display: inline-block;
            margin: 0;
            transition: transform 0.3s ease-in-out; /* 动画效果 */
            width: 30px;
            height: 30px;
        }
        .block2 {
            background-color: #000000; /* 方块颜色 */
            border-radius: 5px; /* 添加圆角 */
            display: inline-block;
            margin: 0;
            transition: transform 0.3s ease-in-out; /* 动画效果 */
            width: 30px;
            height: 30px;
        }
    
    </style>
</head>
<body>
   

    <div class="container">
        
        <div class="left-content">
            <div align="center">
                <h2 style="color:#fff;margin-bottom: 10px;">快乐江米-俄罗斯方块1.0.4</h2>
            </div>
            <div align="center"><div class="grid"></div> <!-- 第一个网格 --></div></div>

        
        <div class="right-content"> <div>
            <p style="width: 100%;font-size: 20px;color: rgb(249, 125, 118);">
                <span>分数：</span><span id="score">0</span>分
              </p>
                <p style="width: 100%;font-size: 20px;color: rgb(249, 125, 118);">
                   
                    <span>等级：</span><span id="level">1</span>级
                   </p>
                    <p style="width: 100%;font-size: 20px;color: rgb(249, 125, 118);">
                      
                        <span>速度：</span><span id="speed">1.5</span>秒
                      </p>
                        <p style="width: 100%;font-size: 20px;color: rgb(249, 125, 118);">
                         
                            <span>时间：</span><span id="time">00:00:00</span></p>
                <p>
                    <button id="buttonbegin" style="width: 100px;height: 30px;" onclick="redoonclick()">
                                    重置 </button>
                </p>
                <p>
                     <button id="buttonplay" style="width: 100px;height: 30px;" onclick="playonclick()"> 
                开始 </button>
                </p>
                <p>
                     <button id="buttonpause" style="width: 100px;height: 30px;" onclick="pauseonclick()">
                暂停 </button>
                </p>
                <p>
                     <button style="width: 100px;height: 30px;" onclick="nextshape()">
                下一个 </button>
                </p>
               
             <!-- <div align="right" style="width: 100px;height: 30px;">
                X:<span id="iii"></span>
                |Y:<span id="jjj"></span>
                </div> -->

                <div align="left" style="width: 100%;height: 30px;color: rgb(255, 0, 0);">
                <span id="msg"></span>
                </div>

                <p style="width: 200px;">左右箭头：左右移动</p>
                <p style="width: 200px;">上箭头：旋转方块</p>
                <p style="width: 200px;">下箭头：快速下移方块</p>
                <!-- <p style="width: 200px;">I键：切换为长条</p>
                <p style="width: 200px;">L键：切换为L</p>
                <p style="width: 200px;">J键：切换为J</p>
                <p style="width: 200px;">T键：切换为T</p>
                <p style="width: 200px;">O(欧)键：切换为田字型方块</p>
                <p style="width: 200px;">Z键：切换为长条Z</p>
                <p style="width: 200px;">S键：切换为长条S</p>
                <p style="width: 200px;">空格键键：直接印刷</p> -->
                <!-- <p style="width: 200px;color: rgb(113, 0, 0);">扣分：每手动切换一次方块扣10分</p> -->
            </div></div>
    </div>
   
       

<script>
    var i=4;
var j=0;
var bottom=19;
var line=9;
var shape='L';
var playid=0;
var refreshid=0;
var timeid=0;
var shapeindex=0;
let shapes=['I','L','J','O','T','Z','S'];
var speed=1500;
var score=0;
var level=1;
var time=0;
var backarr=[];
var isclearall=true;
//定义一个颜色变量，记录当前用的颜色值
var shapecolor='#000000';
var shapecolorindex=0;
const colorCodes = [
        "#BF0000",  // 红色（#FF0000）
        "#FFA500",  // 橙色（#FFA500）
        "#eedd00",  // 黄色（#FFFF00）
        "#00FF00",  // 绿色（#008000）
        "#0000FF",  // 蓝色（#0000FF）
        "#4B0082",  // 靛蓝色（#4B0082）
        "#FFddFF"   // 紫色（#EE82EE）
    ];
// 使用 JavaScript 生成网格
function createGrid() {
   for (let i0 = 0; i0 < 10; i0++) {
    const row = document.createElement('div');
    for (let j0 = 0; j0 < 20; j0++) {
        const block = document.createElement('div');
                // 根据需求可对方块进行样式定制或状态切换
                block.className = 'block';
        // block.innerText=j0+'_'+i0;    
        
        block.id="block"+j0+'-'+i0;
        row.appendChild(block);  
    }
    document.querySelector('.grid').appendChild(row);
    } 
}

//重置事件
function redoonclick(){
    clearInterval(refreshid);
    clearInterval(playid);
    clearInterval(timeid);
    
    backarr=makebackarr();
    // 
    i=0;
    j=4;
    score=0;
    level=1;
    time=0;
    speed=1500;
    nextshape();
    
    clearall();
    showarr(i,j,setShape(shape)[shapeindex]);
    // refreshtimer();
}
//开始事件
function playonclick(){
    play();
    timego();
    refreshtimer();
}
//停止事件
function pauseonclick(){
   //结束所有interval事件
    clearInterval(playid);
    clearInterval(timeid);
    clearInterval(refreshid);
    // location.reload();
}
//刷新事件
function refreshtimer(){
 
    refreshid=setInterval(function(){
       
            if(i==0 && isDown()==false){
                clearInterval(refreshid);
                clearInterval(playid);
                clearInterval(timeid);
                document.getElementById("msg").innerText='游戏结束！';
                alert('游戏结束！');
                return
            }
            level=Math.floor(score/100)+1;
            speed=1500-level*10;
            // clearLine();
            // clearall();
            // document.getElementById("iii").innerText=j;
            // document.getElementById("jjj").innerText=i;
            document.getElementById("score").innerText=score;
            document.getElementById("level").innerText=level;
            document.getElementById("speed").innerText=Math.round(speed/10) / 100;
            document.getElementById("time").innerText=formatSecondsToHMS(time);
        
        if (level >= 150) {
                document.getElementById("msg").innerText = '服了！通关了。！！！！！！！！';
                clearInterval(refreshid);
                clearInterval(playid);
                clearInterval(timeid);
                alert('游戏结束！');
                return
        }else
        if (level >= 100) {
                document.getElementById("msg").innerText = '如果到达150级，我服你！';
        }else
        if (level >= 95) {
            document.getElementById("msg").innerText = '赞许你的卓越表现！你已经非常出色了。';
        } else if (level >= 90) {
            document.getElementById("msg").innerText = '你的成绩令人惊艳，再接再厉！';
        } else if (level >= 85) {
            document.getElementById("msg").innerText = '太棒了，保持这种势头继续前进！';
        } else if (level >= 80) {
            document.getElementById("msg").innerText = '你的进步超出了我们的想象。加油！';
        } else if (level >= 75) {
            document.getElementById("msg").innerText = '你已经取得了非凡的成就，继续保持！';
        } else if (level >= 70) {
            document.getElementById("msg").innerText = '你的表现令人赞叹，继续努力吧！';
        } else if (level >= 65) {
            document.getElementById("msg").innerText = '你正在展现出超凡的能力，加油！';
        } else if (level >= 60) {
            document.getElementById("msg").innerText = '你已经非常接近顶尖水平了。再试一次，超越自己！';
        } else if (level >= 55) {
            document.getElementById("msg").innerText = '你的进步令人刮目相看。继续前进！';
        } else if (level >= 50) {
            document.getElementById("msg").innerText = '你已经迈出了巨大的一步，保持这股势头！';
        } else if (level >= 45) {
            document.getElementById("msg").innerText = '你的努力正在得到回报。加油再进阶！';
        } else if (level >= 40) {
            document.getElementById("msg").innerText = '你已经取得了不俗的成绩。继续挑战自己，实现更多可能！';
        } else if (level >= 35) {
            document.getElementById("msg").innerText = '你的进步令人鼓舞。再接再厉，你会做得更好的！';
        } else if (level >= 30) {
            document.getElementById("msg").innerText = '你已经踏上了成功之路。继续前进吧！';
        } else if (level >= 25) {
            document.getElementById("msg").innerText = '你的努力和进步正在显现。保持动力，你能够做到的！';
        } else if (level >= 20) {
            document.getElementById("msg").innerText = '开始有了一点小成就，继续努力就是胜利者！';
        } else if (level >= 15) {
            document.getElementById("msg").innerText = '还在进步中，你的每一次尝试都是向成功迈进的一步。加油！';
        } else if (level >= 10) {
            document.getElementById("msg").innerText = '开始有了一点小成绩，这只是一个美好的起点。继续前行！';
        } else if (level >= 2) {
            document.getElementById("msg").innerText = '你已经开始了解游戏规则。每一次尝试都是宝贵的经验。加油！';
        } else {
            document.getElementById("msg").innerText = '快乐江米祝你好运！';
        }
        
        
        showarr(i,j,setShape(shape)[shapeindex]); 
    },0);
}
//开始事件
function play(){
    clearInterval(playid);
    playid= setInterval(() => {
            if(i < 20-setShape(shape)[shapeindex].length && isDown()){
                    i++;
                    clearall();
            }else{
                setbackarrvalue();
                nextshape(); 
            }
            clearInterval(playid);
            play();
    }, speed);
}
//计时事件
function timego(){
    timeid=setInterval(function(){
        time+=1; 
    },1000);
}

//根据秒数，格式化成时分秒格式
function formatSecondsToHMS(seconds) {
    const hours = Math.floor(seconds / 3600);
    seconds %= 3600;
    const minutes = Math.floor(seconds / 60);
    seconds %= 60;

    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
//生成结果数组10*20
function makebackarr(){
    var tbackarr=new Array(20);
    for(let i=0; i<20; i++){
        var tarr=new Array(10);
        for(let j=0; j<10; j++){
            tarr[j]=0;
        }
        tbackarr[i]=tarr;
    }
    
    // console.log('tbackarr',tbackarr);
    return tbackarr;
}
//根据两个整数，设置一个方块的class为block2
function setBlockClass(i,j){
    // document.getElementById("block"+i+'-'+j).innerHTML=i+'_'+j;
    // document.getElementById("block"+i+'-'+j).className="block2";
    document.getElementById("block"+i+'-'+j).style.backgroundColor=shapecolor;

}
//根据两个整数，设置一个方块的class为block2
function setBlockClass2(i,j){
    // document.getElementById("block"+i+'-'+j).innerHTML=i+'_'+j;
    // document.getElementById("block"+i+'-'+j).className="block";
    document.getElementById("block"+i+'-'+j).style.backgroundColor='rgba(147, 147, 147, 0.107)';
}

//下一个形状
function nextshape(){
    i=0;
    j=4;
    let ashapeindex=getRandomInt(0,shapes.length-1);
    // //console.log('ashapeindex',ashapeindex);
    shape=shapes[ashapeindex];
    shapeindex=getRandomInt(0,setShape(shapes[ashapeindex]).length-1);
    shapecolor=generateRandomColor();
    
}
//获取一个范围的随机整数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

//设置一个函数，使arr中的数据向右旋转90度。变量用i3和j3
function rotate90(shape) {
    if(i >= 20-setShape(shape)[shapeindex][0].length){
       return;
    }
    shapeindex++;

    if(shapeindex>setShape(shape).length-1){
        shapeindex=0;
    }

    if(j+setShape(shape)[shapeindex][0].length-1>=10){
       j=10-setShape(shape)[shapeindex][0].length; 
    }

  
    clearall();
    showarr(i,j,setShape(shape)[shapeindex]);
}
//设置arr中第一行第一个，和第二行前三个位置的值为1
//声明一个函数叫设置形状
function setShape(typename) {
    
    switch (typename) {
        case "I":
            var shapeI=new Array(2);
            shapeI=[
                [[1,1,1,1]],
                [[1],[1],[1],[1]],
            ];
            return shapeI;
            break;
        case "L":
            var shapeL=new Array(2);
            shapeL=new Array(4);
            shapeL=[
                    [[1,1,1],[0,0,1]],
                    [[1,1],[1,0],[1,0]],
                    [[1,0,0],[1,1,1]],
                    [[0,1],[0,1],[1,1]],
                    
                ];
            return shapeL;
            break;
        case "O":
            var shapeO=new Array(2);
            shapeO=[
                [[1,1],[1,1]],
                [[1,1],[1,1]]
            ]
            return shapeO;
           break;
        case "T":
            var shapeT=new Array(4);
            shapeT=[
                    [[1,0],[1,1],[1,0]],
                    [[1,1,1],[0,1,0]],
                    [[0,1],[1,1],[0,1]],
                    [[0,1,0],[1,1,1]],
                ];
            return shapeT;
            break;
        case "S":
            var shapeS=new Array(2);
            shapeS=[
                [[1,1,0],[0,1,1]],
                [[0,1],[1,1],[1,0]]
            ]
            return shapeS;
            break;
        case "Z":
            var shapeZ=new Array(2);
            shapeZ=[
                [[1,0],[1,1],[0,1]],
                [[0,1,1],[1,1,0]],
            ]
           
            return shapeZ;
            break;
        case "J":
            var shapeJ=new Array(4);
            shapeJ=[
                    [[0,0,1],[1,1,1]],
                    [[1,1],[0,1],[0,1]],
                    [[1,1,1],[1,0,0]],
                    [[1,0],[1,0],[1,1]],
            ]

            return shapeJ;
            break;
        default:
            //console.log("没用这种形状");
            break;
    }
   
}
//根据arr中的值，显示到方格中,做成函数
function showarr(ti,tj,tarr) {
        for (var i1 = 0; i1 < tarr.length; i1++) {
            for (var j1 = 0; j1 < tarr[i1].length; j1++) {
                if (tarr[i1][j1] == 1 ) {
                    setBlockClass(i1+ti,j1+tj);
                }
            }
        } 
}
//印刷到背景中去
function setbackarrvalue(){
 
    for (var i7 = 0; i7 < setShape(shape)[shapeindex].length; i7++) {
        for (var j7 = 0; j7 < setShape(shape)[shapeindex][i7].length; j7++) {
                // console.log('i',i,'i7',i7,'j',j,'j7',j7,'value',setShape(shape)[shapeindex][i7][j7]);
            if (setShape(shape)[shapeindex][i7][j7] == 1) {
            //    console.log('backarr['+(i+i7)+']['+(j+j7)+']',backarr[i+i7][j+j7]);
               backarr[i+i7][j+j7] = shapecolorindex+1;
            }
        }
    }
    clearLine();
    clearall();
}
//判断是否可以下降
function isDown(){
   
    for (var i8 =setShape(shape)[shapeindex].length-1 ; i8 >=0; i8--) {
        for(var j8 = 0 ;  j8 < setShape(shape)[shapeindex][i8].length ; j8++) {
            // console.log("setShape(shape)[shapeindex]",setShape(shape)[shapeindex]);
            // console.log("i",i,"j",j);   
            // console.log('backarr[i+i8+1][j+j8]',backarr[i+i8+1][j+j8]);
            if (setShape(shape)[shapeindex][i8][j8] == 1 && backarr[i+i8+1][j+j8] >0) {
                return false;
                break;
            }
        }
    }
    return true;
}
//判断是否可以往左一格
function isLeft(){

    for (var i8 = 0; i8 < setShape(shape)[shapeindex].length; i8++) {
        for(var j8 = 0 ;  j8 < setShape(shape)[shapeindex][i8].length ; j8++) {
            if (setShape(shape)[shapeindex][i8][j8] == 1 && backarr[i+i8][j+j8-1] >0) {
                 return false;
            }
        }
    }
    return true;
    
}
//判断是否可以往右一格
function isRight(){
   
    for (var i8 = setShape(shape)[shapeindex].length-1; i8 >= 0; i8--) {
        for(var j8 =setShape(shape)[shapeindex][i8].length-1  ;  j8 >=0  ; j8--) {
            if (setShape(shape)[shapeindex][i8][j8] == 1 && backarr[i+i8][j+j8+1] >0) {
                 return false;
            }
        } 
    }
    return true;
    
}
//清除所有格的内容
function clearall(){
    for(let i0=0;i0<20;i0++){
            for(let j0=0;j0<10;j0++){
                        if(backarr[i0][j0]==0){
                            // console.log("block"+i0+'-'+j0);
                            // document.getElementById("block"+i0+'-'+j0).className="block"; 
                            document.getElementById("block"+i0+'-'+j0).style.backgroundColor= 'rgba(147, 147, 147, 0.107)' ;
                        }
                        else{
                            // document.getElementById("block"+i0+'-'+j0).style.backgroundColor=shapecolor;
                            document.getElementById("block"+i0+'-'+j0).style.backgroundColor= colorCodes[backarr[i0][j0]-1];   
                        }
            }
    }
}
//清除backarr中一行都是1的值
function clearLine(){
 
    for(var i8 = 0;  i8 < backarr.length  ; i8++) {
        // console.log('backarr[i8]',backarr[i8]);
        var count=1;
        for(var j8 = 0;  j8 < backarr[i8].length ; j8++) {
            count *= backarr[i8][j8];
        }
        if(count > 0){
            // delarr.push(i8-1);
            backarr.splice(i8,1);
            backarr.unshift([0,0,0,0,0,0,0,0,0,0]);
            score+=10;
            
        }
    }
    clearInterval(playid);
    play();

    
}
//监听键盘事件，改变方块的class为block2
document.addEventListener('keydown', function(event) {
    
    var key = event.key;
    switch (key) {
        case 'ArrowLeft': // 左箭头键
            if(j>0 && isLeft()){
                j--;
            };
           
            break;
        case 'ArrowRight': // 右箭头键
            //  //console.log('i',setshape(shape)[shapeindex].length);
            if(j < 10-setShape(shape)[shapeindex][0].length && isRight()){
                j++;
            }

        
            break;
        case 'ArrowUp': // 上箭头键
            //   j--;     
            rotate90(shape);
            
            break;
        case 'ArrowDown': // 下箭头键
            while(i < 20-setShape(shape)[shapeindex].length && isDown()){
                    i++;
            }
           
            break;
        // 敲击空格键
        case ' ':
            setbackarrvalue();
            // nextshape();
            break;
        case 'l':
           
            shape='L';
            score-=10;
            break;
        case 'o':
           
            shape='O';
            score-=10;
            break; 
        case 'z':
            
            shape='Z';
            score-=10;
            break;   
        case 's':
           
            shape='S';
            score-=10;
            break; 
        case 't':
            
            shape='T';
            score-=10;
            break;
        case 'i':
           
            shape='I';
            score-=10;
            break;
        case 'j':
           
            shape='J';
            score-=10;
            break;
        default: 
            break;
    }
    clearall();

});
// 定义随机颜色函数，生成一个十六进制颜色值
function generateRandomColor() {
    shapecolorindex= Math.floor(Math.random() * colorCodes.length);
    let randomColor = colorCodes[shapecolorindex];
    return randomColor;

}

//创建表格
createGrid();
</script>
</body>
</html>
